<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>库存管理-商品列表</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>

    <!-- start cp-wrapper -->
    <div class="cp-wrapper">

        <form id="uploadForm" enctype="multipart/form-data">

            <div class="cp-hash" id="xsxx"><h3>商品规格设置</h3></div>
            <!-- 销售信息 规格 start -->
            <div class="cp-product">
                <!--                <div class="cp-input sp-tool">-->
                <!--                    <span>商品编码：</span><input id="sp-search" th:value="${specNumber}" type="text" placeholder="请输入商品编码">-->
                <!--                    <b id="specListHtml" style="color: red;"></b>-->
                <!--                    <input type="hidden" name="goodsStockNumber" id="goodsStockNumber"/>-->

                <!--                    <ul id="sp-result">-->
                <!--                    </ul>-->
                <!--                </div>-->
                <div class=" sp-tool" style="margin-left:160px;">
                    <p>
                        <input id="sp-search" type="text" placeholder="请输入商品编码">
                        <input type="hidden" name="goodsStockNumber" id="goodsStockNumber"/>
                        <input type="hidden" name="goodsSpecCount" id="goodsSpecCount" value="0"/>
                    </p>

                    <p><span id="specListHtml" style="color: red;"></span></p>
                    <ul id="sp-result">
                    </ul>
                </div>
                <div class="sp-box">
                    <h3>颜色</h3>
                    <ul class="sp-guige" id="sp-color">

                    </ul>
                    <div class="sp-guige-select">
                        <span id="color-select">添加颜色规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>尺码</h3>
                    <ul class="sp-guige" id="sp-size">

                    </ul>
                    <div class="sp-guige-select">
                        <span id="size-select">添加尺码规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>款式</h3>
                    <ul class="sp-guige" id="sp-style">

                    </ul>
                    <div class="sp-guige-select">
                        <span id="style-select">添加款式规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>规格</h3>
                    <table class="sp-standard">
                        <thead id="sp-thead"></thead>
                        <tbody id="sp-tbody"></tbody>
                    </table>

                </div>
            </div>
            <!-- 销售信息 规格 end -->

            <div class="cp-other">
            </div>


            <div class="cp-button">
                <button type="button" id="submit_btn">提交</button>
            </div>
        </form>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script type="text/javascript" src="/goods/spxx.js"></script>
        <script src="/layui/layui.js"></script>
        <script>
            var specNumbers = [];
            $(function () {
                var mDetailId;
                var pcDetailId;
                layui.use('layedit', function () {
                    var layedit = layui.layedit;
                    pcDetailId = layedit.build('pcDetail', {
                        uploadImage: {
                            url: '/upload_image',
                            type: 'POST'
                        }
                    }); //建立编辑器

                    mDetailId = layedit.build('mDetail', {
                        tool: ['strong', 'image', 'abc'],
                        uploadImage: {
                            url: '/upload_image',
                            type: 'POST'
                        }
                    });


                    $("#submit_btn").click(function () {
                        var title = $("input[name=title]").val();
                        var deputy_title = $("input[name=deputyTitle]").val();
                        layedit.sync(mDetailId);
                        layedit.sync(pcDetailId);
                        if (title == "") {
                            alert("请填写标题");
                            $("input[name=title]").focus();
                            return false;
                        }
                        if (deputy_title == "") {
                            alert("请填写副标题")
                            $("input[name=deputyTitle]").focus();
                            return false;
                        }

                        //商品规格
                        var goodsStockNumber = $("#goodsStockNumber").val();
                        // var goodsStockId = $("#goodsStockId").val();
                        if (goodsStockNumber == '') {
                            alert("请填写商品仓库编码");
                            $("#sp-search").focus();
                            return false;
                        }
                        var goodsSpecCount = $("#goodsSpecCount").val();
                        // if(goodsSpecCount)
                        debugger;
                        //检查商品规格
                        var color = $("input[name^='color']");
                        console.log("颜色");
                        console.log(color);

                        var returnResult = true;

                        //规格编码
                        $("input[name^='spec_code']").each(function (i, el) {
                            var specNumber = $(this).val();
                            if (specNumber == "") {
                                alert("请填写规格编码");
                                $(this).focus();
                                returnResult = false;
                                return false;
                            } else {
                                if (specNumbers.indexOf(specNumber) < 0) {
                                    alert("你填写的规格编码不存在");
                                    $(this).focus();
                                    returnResult = false;
                                    return false;
                                }
                            }
                        });
                        //规格价格
                        $("input[name^='spec_price']").each(function (i, el) {
                            if ($(this).val() == "") {
                                alert("请填写价格");
                                $(this).focus();
                                returnResult = false;
                                return false;
                            }
                        });
                        if (returnResult == false) return false;

                        // //规格颜色
                        // $("input[name^='spec_color']").each(function (i, el) {
                        //     if ($(this).val() == "") {
                        //         alert("请填写颜色");
                        //         $(this).focus();
                        //         returnResult = false;
                        //         return false;
                        //     }
                        // });
                        // if (returnResult == false) return false;
                        // //规格尺码
                        // $("input[name^='spec_size']").each(function (i, el) {
                        //     if ($(this).val() == "") {
                        //         alert("请填写尺码");
                        //         $(this).focus();
                        //         returnResult = false;
                        //         return false;
                        //     }
                        // });
                        // if (returnResult == false) return false;
                        //
                        // //价格
                        // $("input[name^='spec_price']").each(function (i, el) {
                        //     if ($(this).val() == "" || isNaN($(this).val())) {
                        //         alert("请填写价格");
                        //         $(this).focus();
                        //         returnResult = false;
                        //         return false;
                        //     }
                        // });
                        // if (returnResult == false) return false;

                        //商品图片
                        var imgHas = true;
                        $("input[name^='image']").each(function (i, el) {
                            var img = $(this).val();
                            console.log("图片" + i + "【" + img + "】");
                            if (i == 0) {
                                if ($(this).val() == "") {
                                    alert("请上传商品主图");
                                    $(this).focus();
                                    imgHas = false;
                                    return false;
                                }
                            }

                        });
                        if (imgHas == false) return false;

                        //视频
                        var video = $("input[name^='video']").val();
                        var videoImg = $("input[name^='videoImg']").val();
                        console.log("视频文件：" + video)
                        console.log("视频图片：" + videoImg)


                        // var freightTemplate = $("#freightTemplate").val();
                        // if (freightTemplate == null || freightTemplate == 0) {
                        //     alert("请选择运费模版");
                        //     return false;
                        // }


                        // $("#uploadForm")

                        // debugger;
                        // alert(freightTemplate);
                        //
                        //  alert("请填写完整的信息");
                        var fd = new FormData($('#uploadForm')[0]);
                        $.ajax({
                            url: "/goods/publish_ajax",
                            type: "POST",
                            dataType: "JSON",
                            data: $('#uploadForm').serialize(),
                            success: function (res) {
                                if (res.code == 0) {
                                    window.location.href = "/goods/list?flag=" + res.data;
                                } else {
                                    alert(res.msg);
                                }
                                // alert(JSON.stringify(res));
                                return false;
                            }
                        });
                        return false;
                    })


                });


            });
        </script>

        <!--        <script type="text/javascript">-->
        <!--            // 模拟数据-->
        <!--            var ggData = [-->
        <!--                {color: '黑色', size: 'S', style: '胖胖的', code: '1000', price: '100.00', currentQty: '500'},-->
        <!--                {color: '黑色', size: 'S', style: '瘦瘦的', code: '1000', price: '100.00', currentQty: '500'},-->
        <!--                {color: '黑色', size: 'M', style: '胖胖的', code: '1000', price: '100.00', currentQty: '500'},-->
        <!--                {color: '黑色', size: 'M', style: '瘦瘦的', code: '1000', price: '100.00', currentQty: '500'},-->
        <!--                {color: '白色', size: 'S', style: '胖胖的', code: '1000', price: '100.00', currentQty: '500'},-->
        <!--                {color: '白色', size: 'S', style: '瘦瘦的', code: '1000', price: '100.00', currentQty: '500'},-->
        <!--                {color: '白色', size: 'M', style: '胖胖的', code: '1000', price: '100.00', currentQty: '500'},-->
        <!--                {color: '白色', size: 'M', style: '瘦瘦的', code: '1000', price: '100.00', currentQty: '500'}-->
        <!--            ];-->
        <!--        </script>-->

        <script type="text/javascript" src="/goods/guige.js"></script>

        <!--商品编码搜索-->
        <script type="text/javascript">
            $(function () {
                function createLI(data) {
                    for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                        tpl += '<li data-id="' + data[i].id + '" data-no="' + data[i].number + '">' + data[i].number + '_' + data[i].name + '</li>';
                    }
                    return tpl;
                }


                var $search = $('#sp-search');
                var $create = $('#sp-create');
                var $result = $('#sp-result');
                var $table = $('#sp-table');
                var $data = $('#sp-data');
                // 搜索
                $search.on('input', function (e) {
                    e.stopPropagation();
                    var key = $(this).val();
                    console.log(key);
                    $.ajax({
                        url: "/stock_api/goods_search_by_number",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({key: key}),
                        success: function (res) {
                            // alert(res.data.length);
                            $result.html("");
                            if (res.code == 0 && res.data.length > 0) {
                                console.log(res.data);
                                $result.html(createLI(res.data)).show();
                            }
                            // alert(JSON.stringify(res));
                        }
                    });
                });
                $result.delegate('li', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var id = _this.attr('data-id'); //id
                    var no = _this.attr('data-no');
                    $search.val(_this.text());
                    $("#goodsStockNumber").val(no);
                    // $("#goodsStockId").val(id);
                    console.log("选择的商品：" + id + " " + no + " " + _this.text());

                    $.ajax({
                        url: "/stock_api/goods_spec_by_goodsId",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({id: id}),
                        success: function (res) {
                            $("#specListHtml").html("");
                            // alert(res.data.length);
                            if (res.code == 0) {
                                console.log("查询到商品信息");
                                console.log(res.data);
                                $result.hide();
                                $("#goodsSpecCount").val(res.data.length);

                                if (res.data.length > 0) {
                                    var h = "该商品共有" + res.data.length + "个规格,";
                                    for (var i = 0; i < res.data.length; i++) {
                                        specNumbers.push(res.data[i].specNumber);
                                        h += "[ " + res.data[i].specNumber + "-" + res.data[i].name + " ] "
                                    }
                                    $("#specListHtml").html(h);

                                    // $data.html(createTR(res.data));
                                    // $table.show();
                                } else {
                                    alert("没有规格数据");
                                }

                            }
                            // alert(JSON.stringify(res));
                        }
                    });

                });
                $result.click(function (e) {
                    e.stopPropagation();
                });
            });
        </script>
    </div>
    <!-- end cp-wrapper -->

</div>
</body>
</html>
